<template>
<view>
<!--pages/topicality/bsy/bsy.wxml-->
<!--<import src="../../webview/contact.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}" /> -->
<view class="sys-body">
  <view class="sys-border">
    <view class="sys-bt-title">{{bsyData.h1}}</view>
    <view class="sys-head-content">
      <text>{{bsyData.guid}}</text>
    </view>
  </view>
  <!-- 相关办事 -->
  <view class="sys-borders">
    <view v-for="(condi, n) in bsyData.conditions" :key="n" style="margin-top:36rpx;">
      <view class="sys-banshi" v-if="showTap[n]==true">
        <view>{{condi.title}}</view>
      </view>
      <view class="gongju-box">
        <view v-for="(item, m) in condi.content" :key="m" :class="banIndex[n]==m?'gongju-sel':'gongju'" :hidden="showorhide[n][m]?false:true" @tap="banliTap" :data-n="n" :data-m="m" :data-name="item">{{item}}</view>
      </view>
    </view>
  </view>

  <view v-if="infoData!=''">
    <!-- 文章链接 -->
    <view class="sys-border" v-if="infoData.title">
      <navigator :url="'/pages/article/detail/detail?id=' + infoData.id + '&type=bsy&city=' + citycode" class="wzsee">
        <text>{{infoData.title}}[查看全文]</text>
      </navigator>
    </view>

    <!-- 富文本内容 -->
    <view class="rich-text-box" v-if="infoData.content[0].content">
      <!-- <rich-text nodes="{{infoData.content[0].content}}" style="user-select:text;-webkit-user-select:text"></rich-text> -->
      <mp-html :selectable="true" :lazy-load="true" :copy-link="false" @linktap="linkTap" :content="content"></mp-html>
    </view>

    <!-- 文内相关链接 -->
    <!-- <view class="links" wx:if="{{infoData.content[0].links.length>0}}" wx:key="index">
      <view class="links-title">文内相关链接：</view>
      <view class="links-text" wx:for='{{infoData.content[0].links}}' wx:key="index" bindtap='link' data-id='{{item.id}}' data-url='{{item.url}}' data-type='{{item.type}}' data-title="{{item.title}}">{{item.title}}</view>
    </view> -->
  </view>

  <!-- 办理条件 -->
  <!-- <view class="sys-border">
    <view class="sys-banli">
      <image src="/images/sys/icon1.png"></image>
      <view>办理条件</view>
    </view>
    <view style="margin-top:20rpx;">
      <text>一段描述一段描述一段描述一段描述一段描述一段描述一 一段描述一段描述一段描述一段描述一段描述一段描述段 一段描述一段描述一段描述一段描述一段描述。
      </text>
    </view>
  </view> -->

  <!-- 推荐文章 -->
  <view style="padding:10rpx 46rpx;" v-if="bsyData.classid!=0 && wzList!=''">
    <view class="sys-flex-row">
      <view class="sys-banshi">
        <image src="/static/images/dbline.png"></image>
        <view>推荐文章</view>
      </view>
      <navigator class="see-more" :url="'/pages/article/list/list?id=' + bsyData.classid + '&type=bsy&city=' + citycode">
        <text>查看更多</text>
        <image src="/static/images/sys/right.png"></image>
      </navigator>
    </view>

    <navigator v-for="(item, index) in wzList" :key="index" class="content" :url="'/pages/article/detail/detail?id=' + item.id + '&type=' + item.pagetype + '&city=' + (citycode=='sz'?'sz':citycode)">
      <view class="title">
        <text style="font-size:28rpx;color:#141414;">{{item.title}}</text>
        <view class="zuan-time">
          <view class="time">{{item.publictime}}</view>
        </view>
      </view>
      <image :src="item.images" mode="aspectFill" v-if="item.images"></image>
    </navigator>
  </view>
</view>
<!-- 底部空白 -->
<view style="height:80rpx;"></view>

<!-- 快捷导航 -->
<fastnav :qrcodeimg="qrcodeimg" :citycode="citycode" :showNav="showNav"></fastnav>

<!-- 收藏与分享 -->
<view class="fixed">
  <button class="bottom-box" @tap="collectBtn" :data-id="data.id">
    <text>{{(collectFlag == 1 && scData !="")?"已收藏":"收藏"}}</text>
    <image :src="(collectFlag == 1 && scData !='')?'/static/images/yicollect.png':'/static/images/collect.png'"></image>
  </button>
  <button class="bottom-box" open-type="share">
    <text>分享</text>
    <image src="/static/images/share.png"></image>
  </button>
</view>
</view>
</template>

<script>
// pages/topicality/bsy/bsy.js
const app = getApp();
const util = require("../../../utils/util.js");
var banIndex = [];
var showorhide = [];
var showTap = [];
var conditions, condition;
import fastnav from "../../../component/fastnav/fastnav";
import mpHtml from "../../../component/mp-html/index";

export default {
  data() {
    return {
      // banIndex: 0,
      showNav: true,
      // 快捷导航是否展开
      showtk: false,
      // 是否显示外链客服弹框
      collectCue: false,
      infoData: [],
      wzList: [],
      showTap: [],
      m: "",
      n: "",
      banIndex: [],
      citycode: "",
      content: "",
      qrcodeimg: "",
      collectFlag: 0,
      scData: "",
      id: "",
      city: "",
      bsyData: "",
      collectValue: {},
      linkData: "",
      showorhide: ""
    };
  },

  components: {
    fastnav,
    mpHtml
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      id: options.id ? options.id : "",
      citycode: options.city ? options.city : uni.getStorageSync("citycode") ? uni.getStorageSync("citycode") : 'sz'
    });
    util.getUrl(app.globalData.url).then(res => {
      util.cityList().then(res => {
        let citydata = res.allcity.filter(v => v.citycode == this.citycode);
        if (citydata[0]) this.setData({
          city: Array.isArray(citydata) ? citydata[0].cityname : uni.getStorageSync("city")
        });
      }); // 获取城市公众号二维码

      util.cityConfig(this.citycode).then(res => {
        if (res) this.setData({
          qrcodeimg: res.qrcode
        });
      });
    });
  },

  onShow() {
    util.getUrl(app.globalData.url).then(res => {
      this.getbanshiData();
      this.isCollect(this.id);
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: this.bsyData ? this.bsyData.title : '',
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg" // path: 'pages/topicality/bsy/bsy?id=' + this.data.id + '&city=' + this.data.citycode,

    };
  },
  // 分享朋友圈
  onShareTimeline: function () {
    return {
      title: this.bsyData ? this.bsyData.title : '',
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg",
      query: {
        id: this.id,
        city: this.citycode
      }
    };
  },
  methods: {
    // 获取办事指南接口
    getbanshiData() {
      let data = {
        citycode: this.citycode == 'sz' ? 'bsy' : this.citycode,
        action: 'zt',
        id: this.id
      };
      util.request('index.php', data, 'GET').then(res => {
        conditions = res.data.conditions;
        condition = res.data.condition;
        if (conditions) for (let i = 0; i < conditions.length; i++) {
          banIndex[i] = 0;
          showorhide[i] = [];

          for (let j = 0; j < conditions[i].content.length; j++) {
            showorhide[i][j] = true;
          }
        }

        for (let i = 0; i < showorhide.length; i++) {
          if (showorhide[i].indexOf(true) != -1) {
            showTap.push(true);
          } else {
            showTap.push(false);
          }
        }

        this.setData({
          banIndex,
          bsyData: res.data,
          showTap,
          collectValue: {
            "id": this.id,
            "title": res.data.title,
            "path": "/pages/topicality/bsy/bsy"
          }
        });
        let e = {
          currentTarget: {
            dataset: {
              n: 0,
              m: 0
            }
          }
        };
        this.banliTap(e); // this.getInfoData();

        this.getwzList(res.data.classid);
      });
    },

    // 获取办事内容接口
    getInfoData(bsyid) {
      let data = {
        citycode: this.citycode == 'sz' ? 'bsy' : this.citycode,
        action: 'bsyhtml',
        id: bsyid
      };
      util.request('index.php', data, 'GET').then(res => {
        this.setData({
          content: res.data.content[0].content,
          infoData: res.data,
          linkData: res.data.content[0].links
        });
      });
    },

    // 富文本内容可点击的标签
    linkTap(e) {
      let url = e.detail.href;

      if (this.linkData != '') {
        let urlRes = [];
        urlRes = this.linkData.filter((v, k) => {
          var str = v.url;
          str = str.replace(/&amp;/g, "&");

          if (str == url) {
            return v;
          } // if (v.id != 0 && v.url == url) {
          //   return v
          // }

        });

        if (urlRes != '') {
          let id = urlRes[0].id;
          let type = urlRes[0].type;
          let citycode = urlRes[0].city ? urlRes[0].city : this.citycode;

          if (id != 0) {
            uni.navigateTo({
              url: '/pages/article/detail/detail?id=' + id + '&type=' + type + '&city=' + citycode
            });
          } else {
            if (url.indexOf("mp.weixin.qq.com") != -1) {
              uni.navigateTo({
                url: '/pages/webview/webview?path=' + encodeURIComponent(url)
              });
            } else {
              this.setData({
                showtk: true
              });
              util.navContact(url, url);
            }
          }
        } else {
          util.navContact(url, url);
        }
      }
    },

    // 外链进入客服会话
    contact() {
      this.setData({
        showtk: false
      });
    },

    // 外链弹框关闭
    close() {
      this.setData({
        showtk: false
      });
    },

    // 获取文章列表接口
    getwzList(id) {
      let infoData = {
        citycode: this.citycode == 'sz' ? 'bsy' : this.citycode,
        action: 'list',
        pagesize: 5,
        classid: id
      };
      util.request('index.php', infoData, 'GET').then(res => {
        this.setData({
          wzList: res.data
        });
      });
    },

    // 添加收藏接口
    addCollect(id) {
      let data = {
        action: "collect",
        option: "add",
        openid: uni.getStorageSync("openid"),
        citycode: this.citycode,
        value: JSON.stringify(this.collectValue),
        // value: this.data.collectValue,
        valueid: id,
        path: "article"
      };
      util.request('user.php', data, 'POST').then(res => {
        if (res.data.state == 1) uni.showToast({
          title: res.data.message
        });
        this.onShow();
      });
    },

    // 判断是否已收藏
    isCollect(id) {
      let data = {
        action: "collect",
        option: "list",
        openid: uni.getStorageSync("openid"),
        size: 10,
        page: 1,
        valueid: id,
        path: "article"
      };
      util.request('user.php', data, 'POST').then(res => {
        let collectFlag = res.data.state;
        let scData = res.data.data;
        this.setData({
          collectFlag,
          scData
        });
      });
    },

    // 我要办理
    banliTap(e) {
      let n = e.currentTarget.dataset.n;
      let m = e.currentTarget.dataset.m;
      banIndex[n] = m;
      let k = n + 1;
      if (conditions && conditions.length) if (k < conditions.length) {
        let conditionCurrent = conditions[k].content;

        for (let c = 0; c < conditionCurrent.length; c++) {
          showorhide[k][c] = false;

          for (let i = 0; i < condition.length; i++) {
            let isFound = true;

            for (let j = 0; j < banIndex.length; j++) {
              if (j >= k) {
                break;
              }

              if (condition[i]["condition"]["c" + j] != conditions[j]['content'][banIndex[j]]) {
                isFound = false;
                break;
              }
            }

            if (isFound && condition[i]["condition"]["c" + k] == conditionCurrent[c]) {
              showorhide[k][c] = true;
              break;
            }
          }
        }

        showTap = [];

        for (let i = 0; i < showorhide.length; i++) {
          if (showorhide[i].indexOf(true) != -1) {
            showTap.push(true);
          } else {
            showTap.push(false);
          }
        }

        var nextSelect = banIndex[n + 1];

        if (showorhide[n + 1][nextSelect] == false) {
          let arr = [];

          for (let i = 0; i < showorhide[n + 1].length; i++) {
            if (showorhide[n + 1][i] == true) {
              arr.push(i);
              nextSelect = arr[0];
            }
          } // nextSelect = 0;

        }

        var e = {
          currentTarget: {
            dataset: {
              n: n + 1,
              m: nextSelect
            }
          }
        };
        this.banliTap(e);
      } else {
        for (let i = 0; i < condition.length; i++) {
          let isFound = true;

          for (let j = 0; j < banIndex.length; j++) {
            if (condition[i]['condition']['c' + j] != '') {
              if (conditions[j]) if (condition[i]['condition']['c' + j] != conditions[j]['content'][banIndex[j]]) {
                isFound = false;
                break;
              }
            }
          }

          if (isFound) {
            this.getInfoData(condition[i].bsyid);
            break;
          }
        }
      }
      this.setData({
        banIndex,
        showorhide,
        showTap
      });
    },

    // 文内链接点击事件
    link: function (e) {
      let id = e.currentTarget.dataset.id;
      let title = e.currentTarget.dataset.title;
      let url = e.currentTarget.dataset.url;
      let type = e.currentTarget.dataset.type;

      if (id != 0 && url == "") {
        uni.navigateTo({
          url: '/pages/article/detail/detail?id=' + id + '&type=' + type + '&city=' + this.citycode
        });
      } else {
        if (url.indexOf("pages") == -1 && url.indexOf("mp.weixin.qq.com") == -1) {
          this.setData({
            showtk: true
          });
          util.navContact(title, url);
        } else {
          util.navMethod(url);
        }
      }
    },

    // 收藏按钮
    collectBtn(e) {
      // let id = e.currentTarget.dataset.id;
      if (this.collectFlag != 1 && this.scData == "") {
        this.addCollect(this.id);
      }

      if (!uni.getStorageSync("collectCue")) {
        setTimeout(function () {
          uni.showModal({
            content: '返回首页后，点击“我的”即可查看已收藏的内容。',
            showCancel: false,
            confirmText: "我知道了"
          });
        }, 2000);
      }

      uni.setStorageSync("collectCue", "collectCue");
    },

    /**
     * 页面滑动事件的处理函数
     */
    onPageScroll: function () {
      this.setData({
        showNav: false
      });
    }
  }
};
</script>
<style>
/* pages/topicality/bsy/bsy.wxss */

/* 搜一搜模板样式 */
.sys-border{border-bottom: 15rpx  solid #F6F6F6;padding: 36rpx 46rpx;}
.sys-bt{display: flex;flex-direction: row;align-items: flex-end;justify-content: space-between;}
.sys-bt-title{font-size:38rpx;font-family:PingFang SC;font-weight:600;
line-height:52rpx;color:rgba(20,20,20,1);opacity:1;}
.bt-time{font-size:26rpx;font-family:PingFang SC;font-weight:400;
line-height:36rpx;color:rgba(20,20,20,1);opacity:1;}
.sys-head-content{display: flex;flex-direction: column;margin-top: 16rpx;}
.sys-body text{font-size:26rpx;font-family:PingFang SC;font-weight:400;
line-height:36rpx;color:rgba(133,133,133,1);opacity:1;}

/* 办理 */
.banli-box{display: flex;flex-direction: row;align-items: center;justify-content: space-between}
.banli-box image{width: 50rpx;height: 50rpx;}
.sys-banli{display: flex;flex-direction: row;align-items: center;}
.sys-banli image{width: 40rpx;height: 40rpx;}
.sys-banli view{font-size:33rpx;font-family:PingFang SC;font-weight:600;
line-height:42rpx;color:rgba(20,20,20,1);opacity:1;margin-left: 15rpx;}

.sys-process{margin-left: 10rpx;margin-top: 20rpx;}
.sys-flex{display: flex;flex-direction: row;align-items: center;}
.dot{width: 20rpx;height: 20rpx;margin-right: 30rpx;}
.process-text{font-size:28rpx;font-family:PingFang SC;font-weight:500;line-height:40rpx;
color:rgba(61,61,61,1);opacity:1;}

/* 相关办事 */
.sys-banshi{display: flex;flex-direction: row;align-items: center;margin-bottom: 12rpx;}
.sys-banshi image{width: 16rpx;height: 32rpx;margin-right: 15rpx;}
.sys-banshi view{font-size:35rpx;font-family:PingFang SC;font-weight:600;
line-height:42rpx;color:rgba(20,20,20,1);opacity:1;}

/* 查看全文 */
.wzsee{background:#E8EFFF;border-radius:48rpx;padding: 15rpx 40rpx;text-align: center;}
.wzsee text{font-size:26rpx;font-family:PingFang SC;font-weight:600;
line-height:36rpx;color:rgba(22,106,232,1);opacity:1;}

/* 查看更多 */
.sys-flex-row{display: flex;align-items: center;justify-content: space-between;}
.see-more{display: flex;align-items: center;}
.see-more text{font-size:27rpx;font-family:PingFang SC;font-weight:400;line-height:34rpx;
color:rgba(152,152,152,1);opacity:1;}
.see-more image{width: 15rpx;height: 22rpx;margin-left: 10rpx;}

/* 文章列表 */
.content{border-bottom: 1rpx solid #CCCCCC;padding:20rpx 0;display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-top: 10rpx;}
.content:last-child{border:0}
.content .title{display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;flex: 1;}
.content text{font-size:34rpx;font-family:PingFang SC;font-weight:400;color:rgba(0,0,0,1);}
.content image{width:188rpx;height:140rpx;border-radius:4rpx;margin-left: 20rpx;flex-shrink: 0;}
.zuan-time{display: flex;align-items: center;justify-content: space-between; margin-top:15rpx; 
  width: 100%;}
.zuanti{border:2rpx solid rgba(255,102,0,1);opacity:1;border-radius:16rpx;font-size:18rpx;
  font-family:PingFang SC;font-weight:500;color:rgba(255,102,0,1);padding:5rpx 12rpx;}
.time{font-size:24rpx;font-family:PingFang SC;font-weight:400;color:rgba(153,153,153,1);}

/* 我要办理 */
.sys-borders{border-bottom: 15rpx  solid #F6F6F6;padding: 0rpx 46rpx;}
.gongju-box{display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;margin-bottom: 25rpx;}
.gongju{background:rgba(242,242,242,1);opacity:1;border-radius:6rpx;padding: 15rpx 20rpx;
  font-size:24rpx;font-family:PingFang SC;font-weight:500;color:#888888;
  margin-right: 25rpx;margin-top: 16rpx;text-align: center;}
.gongju-sel{background:#FDEFE4;opacity:1;border-radius:6rpx;padding: 15rpx 20rpx;
  font-size:24rpx;font-family:PingFang SC;font-weight:500;color:#FF7920;
  margin-right: 25rpx;margin-top: 16rpx;text-align: center;}

/* 富文本解析 */
.rich-text-box {
  margin-top: 20rpx;
  line-height: 60rpx;
  padding:  0 30rpx;
}
.rich-text-box rich-text{
  margin:  32rpx 0;
  display: block;
}

/* 文内链接 */
.links{padding: 20rpx 46rpx; word-break: break-all;line-height:40rpx;}
.links .links-title{ color: #000; font-weight: bold; }
.links .links-text{ color: #f60; margin: 30rpx 0; }

/* 收藏和分享 */
.fixed{display: flex;flex-direction: row;align-items: center;position: fixed;
  bottom: 15rpx;left: 100rpx;}
.bottom-box{background:rgba(255,102,0,1);box-shadow:0px 3px 6px rgba(84,141,255,0.4);
opacity:1;border-radius:22px;display: flex;align-items: center;padding: 28rpx 0rpx;
width: 234rpx;justify-content: center;margin-left: 30rpx;}
.bottom-box text{font-size:32rpx;font-family:PingFang SC;font-weight:500;
color:rgba(255,255,255,1);opacity:1;}
.bottom-box image{width: 32rpx;height: 30rpx;margin-left: 10rpx;}
button{line-height: 0;}
</style>